<template>
  <div class="doodle-view" :style="{width: 'auto'}">

    <!-- 操作按钮群 -->
    <div class="doodle-handle">
      <div class="mb-4">保留部分</div>
      <el-checkbox class="doodle-btn" v-for="(v,i) in types" :key="i" v-model="v.value" :label="v.text" border />
    </div>

    <div class="doodle-view-content" v-loading='loading' :style="{height: height+'px'}">
      <img class="doodle-img" :src="src" :width="loading ? 0 : imgWidth" :height="loading ? 0 : imgHeight" @load="resetZoom" />
    </div>

  </div>
</template>

<script>
/** 保留区域 */
/* eslint-disable */
export default {
  name: 'Reserve',
  props: {
    // 图片url
    src: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: Number,
      default: 500
    },
    // 高度
    height: {
      type: Number,
      default: 300
    },
    // 画笔颜色
    strokeStyle: {
      type: String,
      default: '#40387C'
    },
    // 画笔粗细
    lineWidth: {
      type: Array,
      default: [10, 18, 22]
    },
    // 遮罩透明度
    markOpacity: {
      type: Number,
      default: 0.6
    },
    // 选中的保留参数
    clothList: {
      type: Array,
      default: []
    },
    
  },
  data () {
    return {
      history: [],          // 历史记录
      historyIndex: -1,     // 历史记录下标
      dragging: false,      // 是否绘制中
      isClear: false,       // 是否为擦除模式
      imgWidth: 500,        // 图像原始宽度，同时作用于画布
      imgHeight: 300,       // 图像原始高度，同时作用于画布
      zoom: 1,              // 缩放比例
      markImageOriginal: null,      // 原始遮罩图：base64
      markImage: null,      // 遮罩图：base64
      currentLineWidth: 10, // 当前笔触大小
      loading: false,       // 图片是否加载中

      canvas: null,
      ctx: null,
      canvasPos: null,
      shadowCanvas: null,
      shadowCtx: null,
      shadowHistory: [],

      types: [
        {name: 'tops', text:'上衣', value: false},
        {name: 'coat', text:'外套', value: false},
        {name: 'skirt', text:'裙装', value: false},
        {name: 'pants', text:'裤装', value: false},
        {name: 'bag', text:'包类', value: false},
        {name: 'shoes', text:'鞋子', value: false},
        {name: 'hat', text:'帽子', value: false},
      ],
      savePants: null,
    }
  },
  created() {
    setTimeout(() => {
      this.init()
    }, 500)
  },
  watch: {
    src: {
      handler() {
        this.resetAll()
      },
      immediate: true
    },
  },
  methods: {
    /** 重置 */
    reset() {
      this.types.map(e => e.value = false)
      this.save()
    },
    /** 初始化 */
    init() {
    },
    /** 重置比例 */
    resetZoom(e) {
      this.loading = true
      let img = new Image()
      img.src = this.src
      img.onload = (e2) => {
        let w = e2.currentTarget.width
        let h = e2.currentTarget.height
        // 计算纵横比
        let width = this.width
        let height = parseInt(h * (this.width / w))
        if (w >= h) {
          if (height > this.height) {
            width = parseInt(w * (this.height / h))
            height = this.height
          }
          this.zoom = w / width
        } else {
          width = parseInt(w * (this.height / h))
          height = this.height
          if (width > this.width) {
            width = this.width
            height = parseInt(h * (this.width / w))
          }
          this.zoom = h / height
        }
        this.imgWidth = width
        this.imgHeight = height
        this.loading = false
      }
    },
    /** 重置所有设置 */
    resetAll() {
      // 重新读取图片和比例
      this.resetZoom()
    },
    /** 变更图片 */
    onChangeImage() {
      this.resetAll()
    },
    /** 输出遮罩 */
    output() {
      // 输出类型数据
      let reserveData = []
      this.types.forEach(e => {
        if (e.value == true) {
          reserveData.push(e)
        }
      })
      this.$emit('comfirm', {data: this.types})
    },

    /** 选择笔触 */
    selectLineWidth(e) {
      let width = e.currentTarget.dataset.width
      this.currentLineWidth = width
    }
  }
}
</script>
<style src="./index.scss" lang="scss"></style>
